<template>
    <div style="margin: 10px 10px 10px 10px ">
        <div style="margin: 20px 20px 20px 2px ;">
        <template>
            <el-select v-model="value" placeholder="请选择员工" @change="selectlist()">
              <el-option
                v-for="item in worklist"
                 :key="item.value"
                 :label="item.label"
                 :value="item" >
              </el-option>
            </el-select>
          </template>
        </div>

          <!-- 维修员工所有的维修工单 -->
          <template>

            <el-table
              :data="maintenancelist"
              height="65vh"
              border
              style="width: 100%;"
             >
             <template>
              <el-table-column
                prop="requesttime"
                label="请求时间"
                :width=widthlist
                >
              </el-table-column>
              <el-table-column
                prop="name"
                label="请求人"
                :width=widthlist>
              </el-table-column>
              <el-table-column
              label="请求信息"
              prop="content"
              :width=widthlist
              :show-overflow-tooltip="true">
             
            </el-table-column>
              <el-table-column
              prop="phone"
              label="请求人电话"
              :width=widthlist>
            </el-table-column>
            <el-table-column
            prop="assigntime"
            label="指派时间"
            :width=widthlist
        
           >
          </el-table-column>
          <el-table-column
          prop="completetime"
          label="完成时间"
          :width=widthlist
         >
        </el-table-column>
    
        <!-- ------------------------------------- -->
        <!-- 这个是具体的房屋信息 比如那个房屋的维修 -->
        <el-table-column
        prop="address"
        label="请求具体地址"
        :width=widthlist
       >
      </el-table-column>
      
    </el-table-column>
    
      
     
           <el-table-column
            label="状态"
            width="100" >
            <template slot-scope="scope">
           
               <div v-if="scope.row.statuid==2">未接受</div>
               <div v-if="scope.row.statuid==3">进行中</div>
               <div v-if="scope.row.statuid==4">已完成</div>
            
        </template>
          </el-table-column>
      
          <el-table-column label="操作" 
          :width=widthlist
          >
            <template slot-scope="scope">
                <div v-if="scope.row.statuid==2">
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row,3)"
                    >接收</el-button>
                    <el-button
                    size="mini"
                    @click="handleDelete(scope.row,1)">取消</el-button>
                </div>
  <div v-if="scope.row.statuid==3">

    <el-button
    size="mini"
    type="danger"
    @click="handleDelete(scope.row,4)">完成</el-button>
  </div>
  <div v-if="scope.row.statuid==4">
    <el-button
    size="mini"
    type="danger"
    disabled>完成</el-button>
  </div>           
         </template> 
          </el-table-column>   
        </template>       
            </el-table>
          </template>    
    </div>
  </template>
  <script>
    // 1 导入需要使用的组件

     export default{
  

      data(){
        return{
           //选中员工的信息
        value: '',
        valuename:'',
        worklist:[],
        widthlist:"150px",
        maintenancelist:[]
  
        }
      },
      created(){
        this.stafflist()   
      },
      methods:{


        // 维修员工的列表
        stafflist(){
            console.log("维修员工的列表")
            this.axios({
             url:this.$api+'/staff/selectByPostId', 
             dataType:"json",
            method:'get',
            params:{
             
            }  
          }).then((res)=>{


           
            var list=[]
            for(var i=0;i<res.data.length;i++){
                var item={}
                item["value"]=res.data[i].sid
                item["label"]=res.data[i].name
                list.push(item)
            }

            this.worklist=list
            // 页面初始化的时候 给页面一个初始值(展示员工列表的第一条信息)
            // 下拉框的默认值
            this.value=list[0]
            //列表信息的默认数据
            this.selectlist(list[0].value)
           


          }).catch((res)=>{
            console.log(res)
          })
     

        },
            // 下拉框选中的值
        selectlist(item){
            console.log(this.value)
            // 刷新页面后 数据返回没有筛选之前 所以 在按钮后 给当前页面的员工id
          if(!item){
            item=this.value.value
          }
          
          // 查询维修员工相关的表单
            this.axios({
             url:this.$api+'/repairorder/selectByStaffId', 
             dataType:"json",
            method:'get',
            params:{
                staffId:item
            }  
          }).then((res)=>{
            console.log(res)

            var listinfo=[];    
            
            for(var i=0;i<res.data.length;i++){
              var item=res.data[i]
              var list={};
          
              list["assigntime"]=item.assigntime;
              list["completetime"]=item.completetime
            //   本条记录列表的id
              list["id"]=item.id
              list["content"]=item.maintainrequest.content
              list["houserinfolist"]=item.maintainrequest.houseinfo
              // 这条就是房屋地址的展示 全部信息在houserinfolist 但是因为有一个要展示的所有把这个页面挑出来
              // 这个是地址的一个是详情信息 一个是具体信息
              if(item.maintainrequest.address){
                list["address"]=item.maintainrequest.address
              }else{
                list["address"]=item.maintainrequest.houseinfo.build+"号楼"+item.maintainrequest.houseinfo.floor+"层"+
              item.maintainrequest.houseinfo.door+"门"
              }
            //请求人的姓名
              list["name"]=item.maintainrequest.name
              list["phone"]=item.maintainrequest.phone
              list["statuid"]=item.statusId    
            //   // 指派人的id
            //   list["staffId"]=item.staffId  
            //   list["staff"]=item.staff
              list["requesttime"]=item.maintainrequest.requesttime
              listinfo.push(list)
            }
        this.maintenancelist=listinfo
          }).catch((res)=>{
        console.log(res)
          })
        },
        // 接收和取消的按钮
        handleDelete(val,val2){
    let nowTime = this.timestampToTime( new Date().toLocaleString('en-US',{hour12: false}).split(" "))
    console.log(nowTime)
    var list={
              id:"",
              staffId:"",
              assigntime:"",
              statusId:2,
              completetime:""
    }
    var text=""
    switch (val2){
     case 1:
       list.id=val.id;
       list.statusId=1;
       text="取消"
        break;
       case 3:
       list.id=val.id;
       list.statusId=3;
       text="接收"
        break;
        case 4:
       list.id=val.id;
       list.statusId=4;
       text="完成"
       list.completetime=nowTime;
        break;
    }
    this.$confirm('是否确定提交'+text+"任务", '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '提交',
          cancelButtonText: '取消'
        }).then((res)=>{

            console.log("按钮的接口")
        this.axios({
             url:this.$api+'/repairorder/updateStatus', 
             dataType:"json",
            method:'get',
            params:list 
          }).then((res)=>{
            console.log(res)
            console.log(res)
            this.$message({
          message: text+'任务成功',
          type: 'success'
          });
             //   刷新页面
             console.log("按钮后刷新页面")
          this.selectlist(this.value.value)
          
          }).catch((res)=>{
         console.log("失败")
         console.log(res)
          })

        }).catch((res)=>{

        })


        },


     
        // 转化时间格式
        timestampToTime(times) {
    let time = times[1]
    let mdy = times[0]
    mdy = mdy.split('/')
    let month = parseInt(mdy[0]);
    let day = parseInt(mdy[1]);
    let year = parseInt(mdy[2])
    //打印结果为：2022-8-31 11:08:34
    return year + '-' + month + '-' + day + ' ' + time
}

  
      }
     }


  </script>
  <style scoped>
  
  </style>